<template>
	<view class="my-indent">
	
		<swiper class="swiper" duration="300" :current="tabIndex" @change="ontabchange">
			<swiper-item class="swiper-item" :key="item.id" v-for="item in swiperData">
				<template v-if="item.state">
					<template v-if="item.id == 1 || item.id == 4">
						<uni-card :key="obj.id" v-for="obj in item.data" :is-shadow="false" :border="false"
							:margin="'20rpx'" :padding="0">
							<view @click="listClick2(obj)">
								<uni-list :border="false">
									<uni-list-item style="margin-bottom: -10px;">
										<template v-slot:header>
											<view class="v-slot-header">
												<image class="h-o-c-img" :src="obj.logo[0]" mode=""></image>
											</view>
										</template>
										<template v-slot:body>
											<view class="v-slot-body-box">
												<view class="v-slot-body ellipsis1">
													{{obj.position_text || ''}}{{obj.hotel_name || ''}}
													<!-- <text>({{ obj.service_time.split('-')[1] || ''}}月{{obj.service_time.split('-')[2] || ''}}日{{obj.work_time ||''}})</text> -->

												</view>
												<view class="h-o-b-main h-o-b-main2">
													{{obj.service_start_time}}至{{obj.service_end_time}}
													<view style="float: right;">
														共<text style="color: #F81F43;font-size: 32rpx;">{{obj.service_day}}</text>天
													</view>
												</view>
												<view class="h-o-b-main" style="margin-top: 10rpx;">
													<view class="h-o-b-main-son">
														<text>单价:</text>
														<text class="unit_price">￥{{obj.unit_price || ''}}</text>
														<text v-if="obj.order_class==1">/间</text>
														<text v-if="obj.order_class==2">/{{obj.hourly_wage_type==1?'时':'天'}}</text>
														<!-- order_class 1 客房、 2餐饮 -->
													</view>
													<view class="juli">
														<uni-icons color="#50e28c" custom-prefix="iconfont"
															type="icon-weizhi" size="40r"></uni-icons>
														<text class="julikm">{{obj.distance}}</text>
													</view>
													<view class="recommend" v-if="obj.recommended_amount != 0.00">
														<view class="recommend-l">
															<text>推荐</text>
														</view>
														<view class="recommend-r">
															<text>{{obj.recommended_amount}}元 / 人</text>
														</view>
													</view>
												</view>
											</view>
										</template>
										<template v-slot:footer>
											<view class="footer-box">
												
												<view class="anticipated_revenue">预计收入: ￥ <text style="font-size: 32rpx;">{{obj.anticipated_revenue || obj.expect_room_number*obj.unit_price}}</text> </view>
												<view class="footer-btn">已违约</view>
											</view>
										</template>
									</uni-list-item>
								</uni-list>
							</view>
						</uni-card>
					</template>
					<template v-else>
						<view class="jinxingzhong-title" style="padding-bottom: 40rpx;">
							<view v-if="tabIndex === 1">
								<uni-card :key="obj.id" v-for="obj in item.data" :title="obj.hotel_name" extra="已结算"
									:is-shadow="false" :border="false" :margin="'20rpx'" :spacing="'20rpx 40rpx'"
									:padding="0">
									<view>
										<view class="jinxingzhong" @click="listClick(obj)">

											<uni-list :border="false">

												<uni-list-item >
									
													<template v-slot:body>
														<view class="" style="display: flex;">
															<view class="" style="flex: 1;">
																<view v-if="obj.order_class == 1">做房单价</view>
																<view v-if="obj.order_class == 2">工作时薪</view>
																<view>￥{{ obj.room_type_list.price-obj.room_type_list.platform_rate|| 0  }}</view>
															</view>
															<view class="" style="flex: 1;" v-if="obj.order_class == 1">
																<view>房间数量</view>
																<view>{{obj.room_type_list.room_num}}</view>
															</view>
															<view class="" style="flex: 1;">
																
																<view v-if="obj.order_class == 1">工作天数 </view>
																<view v-if="obj.order_class == 2">{{obj.hourly_wage_type == 1 ? "工作小时" :"工作天数"}} </view>
																<view>{{obj.room_type_list.time}}</view>
															</view>
														</view>
													</template>
												</uni-list-item>
											</uni-list>
										</view>

										<view class="s-i" v-if="obj.subsidy != 0">
											<view class="s-i-sum">
												<text class="sum-text">补贴：</text>
												<text class="n-p-text">￥{{ obj.subsidy }}</text>
											</view>
											<view class="s-i-sum">
												<text class="sum-text">合计：</text>
												<text class="n-p-text">￥{{obj.total_money}}</text>
											</view>
										</view>
										<view class="s-i" v-else>
											<view class="s-i-sum1">
												<text class="sum-text">合计：</text>
												<text class="n-p-text">￥{{obj.total_money}}</text>
											</view>
										</view>
									</view>

								</uni-card>
							</view>
							<view v-if="tabIndex === 2">
								<uni-card :key="obj.id" v-for="obj in item.data" :title="obj.hotel_name" extra="已取消"
									:is-shadow="false" :border="false" :margin="0" :padding="0">
									<view class="closeOrder">
										<view class="jinxingzhong" @click="listClick(obj)">
											<uni-list :border="false">
												<uni-list-item>
													<template v-slot:header>
														<view class="v-slot-header">
															<image class="h-o-c-img" :src="obj.logo[0]" mode=""></image>

														</view>
													</template>
													<template v-slot:body>
														<view class="v-slot-body-box">

															<view class="v-slot-body">
																<text>{{obj.hotel_name || ''}}</text>
																<!-- <text>({{ obj.service_time.split('-')[1] || ''}}月{{obj.service_time.split('-')[2] || ''}}日{{obj.work_time ||''}})</text> -->

															</view>
															<view class="h-o-b-main h-o-b-main2">
																<view class="h-o-b-main-anticipated_revenue">
																	<text>单价:</text>
																	<text
																		class="anticipated_revenue">￥{{obj.unit_price || ''}}</text>
																</view>
																<view class="juli">
																	<uni-icons color="#50e28c" custom-prefix="iconfont"
																		type="icon-weizhi" size="40r"></uni-icons>
																	<text class="julikm">{{obj.distance}}</text>
																</view>
															</view>
															<view class="h-o-b-main">
																<view class="h-o-b-main-son">
																	<text>预计收入:</text>
																	<text
																		class="unit_price">￥{{obj.anticipated_revenue || obj.expect_room_number*obj.unit_price}}</text>
																	
																</view>
																<view class="recommend"
																	v-if="obj.recommended_amount != 0.00">
																	<view class="recommend-l">
																		<text>推荐</text>
																	</view>
																	<view class="recommend-r">
																		<text>{{obj.recommended_amount}}元 / 人</text>
																	</view>
																</view>
															</view>
														</view>
													</template>
												</uni-list-item>
											</uni-list>
										</view>
									</view>

								</uni-card>
							</view>
						</view>
					</template>
					<uni-load-more v-if="item.data.length > 0" iconType="auto" :status="item.status"
						@clickLoadMore="clickLoadMore" :content-text="contentText" />
				</template>
				<view
					style="width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;height:100%;"
					v-else>
					<image :src="imgUrl" mode="widthFix" style="width: 360rpx;margin-bottom: 20rpx;height: 416rpx;">
					</image>
					<text style="font-size: 32rpx;font-weight: 500;color: #777777;margin-bottom: 120rpx;">暂无数据!</text>
				</view>
			</swiper-item>
		</swiper>
		<!-- 底部导航栏 -->
		<!-- <view class="tabbar">
			<view v-for="(item,index) in tabbarList" :key="index" class="tab-item" @tap="goPage(index)">
				<image :src="item.img" mode=""></image>
				<view class="">{{item.title}}</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: `${getApp().globalData.imgScr}bj/zanwudingdan.png`,
				imgUrl1: `${getApp().globalData.imgScr}jd/dizhi.png`,
				url1: '/cleaningAdmin/my-indent',
				url: '/cleaningAdmin/my-indent', // 公共的二级页面路径地址
				tabIndex: 0, // 顶部切换栏状态 0：已录用 1：进行中 2：已结算 3：已取消
				tabBars: [
					{
						name: '进行中',
						id: 'jxz'
					}, 
					// {
					// 	name: '待结算',
					// 	id: 'djs'
					// }, 
					{
						name: '已结算',
						id: 'yjs'
					}, 
					{
						name: '已取消',
						id: 'yqx'
					},
				],
				tabbarList:[
					{img:'/static/imgas/jianzhi.png',title:'兼职'},
					{img:'/static/imgas/dingdan_xz.png',title:'订单'},
					{img:'/static/imgas/wode.png',title:'我的'},
				],
				swiperData: [{
						id: 1,
						data: [],
						state: true,
						page: 1, // 初始页码
						total: 0, // 数据总条数
						status: 'more', // 加载状态
					},
					{
						id: 2,
						data: [],
						state: true,
						page: 1, // 初始页码
						total: 0, // 数据总条数
						status: 'more', // 加载状态
					},
					{
						id: 3,
						data: [],
						state: true,
						page: 1, // 初始页码
						total: 0, // 数据总条数
						status: 'more', // 加载状态
					},
					{
						id: 4,
						data: [],
						state: true,
						page: 1, // 初始页码
						total: 0, // 数据总条数
						status: 'more', // 加载状态
					},
				],
				cleaner_longitude: uni.getStorageSync('cleaningData').longitude,
				cleaner_latitude: uni.getStorageSync('cleaningData').latitude,
				contentText: { // 加载状态对应的提示语
					contentdown: '点击加载更多数据',
					contentrefresh: '正在加载中...',
					contentnomore: '没有更多数据'
				},
			}
		},
		async onShow() {
			let _this = this
			this.swiperData[this.tabIndex].state = this.swiperData[this.tabIndex].data.length > 0
			try {
				await Object.assign(this.swiperData[this.tabIndex], this.$options.data().swiperData[this.tabIndex])
				await this.getData()
			} catch (e) {
				//TODO handle the exception
				uni.showToast({
					title: e.errMsg,
					icon: "none"
				})
			}
		},
		onLoad(option) {
			if (option.tabIndex) this.tabIndex = 2
		},
		onPullDownRefresh() {
			let _this = this
			setTimeout(function() {
				uni.showToast({
					title: "刷新成功",
					icon: "none"
				})
				Object.assign(_this.swiperData[_this.tabIndex], _this.$options.data().swiperData[_this.tabIndex])
				_this.getData()
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			/**
			 * 顶部栏 切换时触发
			 * @param {object} e  获取切换元素的实例
			 */
			ontabtap(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current
				this.tabIndex = index
				console.log('this.tabIndex', this.tabIndex)
			},
			/**
			 * 轮播图 页面切换时触发
			 * @param {Object} e 切换到的轮播图页面实例对象
			 */
			ontabchange(e) {
				let index = e.target.current || e.detail.current
				this.tabIndex = index
				Object.assign(this.swiperData[this.tabIndex], this.$options.data().swiperData[this.tabIndex])
				this.getData()
			},
			/**
			 * 点击当前列 触发
			 * @param {number} id 当前列数据的id
			 */
			listClick(item) {
				if (uni.getStorageSync("cleaningData").state !== 2) {
				  uni.showToast({
				    title: "请登录并且认证通过后再试!",
				    icon: "none",
				  });
				  return
				}
				let path = this.url1 + '/details/details'
				let id = item.id
				uni.navigateTo({
					url: `${path}?id=${id}`
				});
			},
			listClick2(item) {
				if (uni.getStorageSync("cleaningData").state !== 2) {
				  uni.showToast({
				    title: "请登录并且认证通过后再试!",
				    icon: "none",
				  });
				  return
				}
				let path = this.url1 + '/details/details'
				let id = item.id
				let infoBtn = 1
				uni.navigateTo({
					url: `${path}?wei_type=wei&id=${id}&infoBtn=${infoBtn}`
				});
			},
			goPage(i){
				if(i==2){
					uni.redirectTo({
						url: '/cleaningAdmin/my/my'
					})
				}else if (i==0){
					uni.redirectTo({
						url: '/cleaningAdmin/home/home'
					})
				}
			},
		
			/**
			 * 订单列表列表加载更多按钮
			 * @param {Object} e 加载更多的状态 
			 */
			clickLoadMore(e) {
				console.log(e.detail)
				if (e.detail.status == 'no-more') return this.swiperData[this.tabIndex].status = 'no-more'
				this.swiperData[this.tabIndex].status = 'loading'
				this.swiperData[this.tabIndex].page += 1
				this.getData(this.swiperData[this.tabIndex].page)
			},
			/**
			 * 请求订单列表数据
			 */
			async getData(page = 1, limit = 10) {
				let _this = this
				let res = []
				try {

					res = await this.$http.post('/index/Cleanerindex/weiyue_list', {
						page: page,
						limit: limit,
						cleaner_longitude: this.cleaner_longitude,
						cleaner_latitude: this.cleaner_latitude,
						order_status: this.tabIndex + 1
					})

					this.swiperData[this.tabIndex].data = [...this.swiperData[this.tabIndex].data, ...res.data]
					this.swiperData[this.tabIndex].state = this.swiperData[this.tabIndex].data.length
					this.swiperData[this.tabIndex].status = this.swiperData[this.tabIndex].page >= res.last_page ?
						'no-more' : 'more'
				} catch (e) {
					this.swiperData[this.tabIndex].state = false
					uni.showToast({
						title: e.errMsg,
						icon: "none"
					})
				}
			},

		}
	}
</script>

<style lang="scss">
	.uni-list-item__container{
		display: block !important;
		padding: 24rpx 0rpx !important;
	}
	.v-slot-header {
		position: relative;
		margin-right: 20rpx;
		width: 140rpx;
		height: 140rpx;
		display: inline-block;
		image {
			width: 140rpx;
			height: 140rpx;
			border-radius: 15rpx;
		}
	}

	.v-slot-body-box {
		display: inline-block;
		width: 71%;
	}

	.v-slot-body {
		font-size: 34rpx;
		color: #000;
		font-weight: bold;
		font-family: PingFang-SC-Bold;
		width: 100%;
		text {
			margin-right: 10rpx;
		}

	}

	.h-o-b-main {
		display: flex;
		justify-content: space-between;

		.juli {
			.julikm {
				font-size: 26rpx;
			}
		}

		&-son {
			font-weight: bold;
			font-size: 28rpx;
		}

		&-anticipated_revenue {
			font-size: 26rpx;
			opacity: .9;
		}

		.anticipated_revenue {
			font-size: 28rpx;
			font-size: 500;
			color: rgba($color: #000000, $alpha: 0.9);
		}


		.h-o-b-main-son {
			font-size: 30rpx;
			line-height: 56rpx;

			.unit_price {
				color: #FF4B4B;
				font-weight: bold;
				font-size: 30rpx;
			}
		}


		.recommend {
			margin-top: 6rpx;
			display: flex;
			width: 214rpx;
			height: 50rpx;
			justify-content: center;
			font-size: 24rpx;
			text-align: center;
			line-height: 48rpx;
			box-sizing: border-box;

			.recommend-l {
				background-color: #fff;
				width: 40%;
				color: #000;
				border-radius: 10rpx 0 0 10rpx;
				border: 2rpx solid #37d283;
			}

			.recommend-r {
				background-color: #37d283;
				width: 60%;
				color: #FFF;
				border-radius: 0rpx 10rpx 10rpx 0rpx;
				border: 2rpx solid #37d283;
			}
		}
	}

	.h-o-b-main2 {
		margin: 20rpx 0 6rpx 0;
		font-size: 26rpx;
	}

	.my-indent {
		position: relative;
		height: 100vh;
		overflow: hidden;

		.scroll-h {
			display: flex;
			align-items: center;
			width: 100%;
			height: 100rpx;
			background-color: #ffffff;

			.uni-tab-item {
				position: relative;
				flex: 1;
				display: inline-block;
				text-align: center;

				.uni-tab-item-title {
					color: rgba($color: #000000, $alpha: 0.7);
					font-size: 28rpx;
					height: 80rpx;
					line-height: 80rpx;
					opacity: 0.7;
				}

				.uni-tab-item-text {
					position: absolute;
					bottom: 8rpx;
					left: 50%;
					transform: translateX(-50%);
					height: 4rpx;
					width: 36rpx;
					background: linear-gradient(255deg, #8dc9f1, #d8eefc);
					border-radius: 2rpx;
				}

				.uni-tab-item-title-active {
					color: #000000;
					font-size: 34rpx;
					font-weight: 600;
				}
			}
		}

		.swiper {
			position: relative;
			height: calc(100% - 100rpx);

			.swiper-item {
				overflow: auto;
				box-sizing: border-box;
				padding-bottom: 10rpx;

				.uni-card {
					border: 0;
					border-radius: 20rpx;
					margin: 20rpx !important;

					.uni-card__header {
						padding: 20rpx 0;

						.uni-ellipsis {
							font-size: 28rpx;
							color: #000000;
							font-weight: 600;
						}

						.uni-card__header-extra-text {
							font-size: 30rpx;
							font-weight: 400;
							color: #54E48C;
							border: 0;
							border-radius: 15px;
						}
					}

					.uni-card__actions {
						margin-bottom: 6rpx;
					}
				}
			}
		}
	}

	.s-i {
		display: flex;
		width: 100%;
		justify-content: space-between;
	}

	.s-i-sum {
		padding-right: 36rpx;
		font-size: 36rpx;
		font-weight: bold;
		text-align: right;
	}
	.s-i-sum1 {
		width: 100%;
		padding-right: 36rpx;
		font-size: 36rpx;
		font-weight: bold;
		text-align: right;
	}
	.n-p-text {
		color: #FF4B4B;
	}

	.jinxingzhong-title {
		.uni-card__header-content {
			/deep/.uni-card__header-content-title {
				font-size: 38rpx !important;
			}
		}

	}

	.jinxingzhong {
		/deep/.uni-list-item__container {
			padding: 0;
		}



		.v-slot-header {
			margin: 30rpx;
			margin-left: 10rpx;

			image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 15rpx;
			}
		}


		.v-slot-body {
			width: 100%;
			font-family: PingFang-SC-Bold;
			// font-size: 26rpx;
			font-weight: bold;
			color: #000;
			margin: 30rpx 0rpx;

			.v-slot-body-top {
				display: flex;
				justify-content: space-between;
			}

			.v-slot-body-bottom {
				opacity: 0.5;
				font-size: 32rpx;
				margin-top: 15rpx;
			}
		}
	}

	.closeOrder {
		.v-slot-header {
			margin: 5rpx 30rpx 0rpx 10rpx;
		}

		.v-slot-body {
			font-weight: bold;
			color: #000;
			margin: 0rpx;
		}
	}

	// .closeOrder {
	// 	.v-slot-body {
	// 		font-size: 34rpx;
	// 		color: #000;
	// 		font-weight: bold;
	// 		font-family: PingFang-SC-Bold;

	// 		text {
	// 			margin-right: 10rpx;
	// 		}

	// 	}

	// 	.v-slot-body-middle {
	// 		opacity: 0.5;
	// 		font-size: 28rpx;
	// 		margin-top: 15rpx;
	// 	}

	// 	.v-slot-body-bottom {
	// 		opacity: 0.5;
	// 		margin-top: 15rpx;
	// 		text {
	// 			margin-right: 10rpx;
	// 			font-size: 28rpx;
	// 		}
	// 	}
	// }
	.tabbar{
		width: 100%;
		height: 126rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;
		display: flex;
		box-shadow: 0 -2rpx 8rpx 0 rgba(0,0,0,0.2);
		box-sizing: border-box;
		border-radius: 13rpx 13rpx 0 0;
		.tab-item{
			flex: 1;
			text-align: center;
			font-size: 20rpx;
			padding-top: 26rpx;
			color: #5b5b5b;
			image{
				width: 42rpx;
				height: 46rpx;
				margin-bottom: 10rpx;
			}
		}
		.tab-item:nth-child(2n){
			color: #000000;
			font-weight: bold;
		}
	}
	.footer-box{
		border-top: 2rpx solid #E8E8E8;
		padding: 18rpx 0;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.footer-btn{
			width: 180rpx;
			height: 64rpx;
			text-align: center;
			line-height: 64rpx;
			// float: right;
			// background: linear-gradient(to right,#d8eefc, #8dc9f1);
			// border-radius: 64rpx;
			font-size: 32rpx;
			color:#F81F43;
		}
		.anticipated_revenue{
			color: #F81F43;
			display: inline-block;
		}
	}
	.uni-card__header-content{
		flex: none !important;
	}
	.ellipsis1{
		overflow: hidden;
		white-space: nowrap; /* 防止文字换行 */
		text-overflow: ellipsis;
	}
</style>
